<template>
  <wd-popup v-model="visible" position="bottom" :style="{ height: '75%' }">
    <view class="account-form">
      <view class="form-header">
        <text class="form-title">{{ isEdit ? "编辑账号" : "添加账号" }}</text>
        <view class="header-actions">
          <wd-icon name="check" size="20px" color="#FF8C00" class="save-icon" :loading="loading" @click="submit"></wd-icon>
          <wd-icon name="close" size="20px" @click="cancel"></wd-icon>
        </view>
      </view>

      <view class="form-content">
        <view class="form-item">
          <text class="form-label">标签</text>
          <scroll-view scroll-x class="category-scroll" show-scrollbar="false">
            <view class="category-list">
              <view class="category-item" :class="{ active: formData.category === 'auto' }" @click="selectCategory('auto')">
                <wd-icon name="detect" size="16px"></wd-icon>
                <text class="category-name">自动分类</text>
              </view>

              <view
                v-for="category in categories.filter((c) => c.id !== 'all')"
                :key="category.id"
                class="category-item"
                :class="{ active: formData.category === category.id }"
                @click="selectCategory(category.id)"
              >
                <category-icon :icon-name="category.icon"></category-icon>
                <text class="category-name">{{ category.name }}</text>
              </view>
            </view>
          </scroll-view>
        </view>

        <view class="form-item">
          <text class="form-label">名称</text>
          <wd-input v-model="formData.name" placeholder="请输入账号名称" clearable></wd-input>
        </view>

        <view class="form-item">
          <text class="form-label">账号</text>
          <wd-input v-model="formData.username" placeholder="请输入用户名/邮箱/手机号" clearable></wd-input>
        </view>

        <view class="form-item">
          <text class="form-label">密码</text>
          <wd-input v-model="formData.password" placeholder="请输入密码" clearable></wd-input>
        </view>

        <view class="form-item">
          <text class="form-label">网站</text>
          <wd-input v-model="formData.website" placeholder="请输入网站地址（选填）" clearable></wd-input>
        </view>

        <view class="form-item">
          <text class="form-label">备注</text>
          <wd-textarea v-model="formData.description" placeholder="请输入备注信息（选填）" :maxlength="200" show-count :rows="2"></wd-textarea>
        </view>
      </view>

      <!-- 移除底部保存按钮 -->
    </view>
  </wd-popup>
</template>

<script>
import { ACCOUNT_CATEGORIES } from "../stores/account.js";
import CategoryIcon from "./CategoryIcon.vue";

export default {
  name: "AccountForm",
  components: {
    CategoryIcon,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    account: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
      categories: ACCOUNT_CATEGORIES,
      formData: {
        category: "auto",
        name: "",
        username: "",
        password: "",
        website: "",
        description: "",
      },
    };
  },
  computed: {
    isEdit() {
      return !!this.account;
    },
  },
  watch: {
    show(val) {
      this.visible = val;
      if (val) {
        this.initForm();
      }
    },
    visible(val) {
      if (!val) {
        this.$emit("update:show", false);
      }
    },
  },
  methods: {
    initForm() {
      if (this.account) {
        // 编辑模式，填充表单数据
        this.formData = { ...this.account };
      } else {
        // 新增模式，重置表单
        this.formData = {
          category: "auto",
          name: "",
          username: "",
          password: "",
          website: "",
          description: "",
        };
      }
    },
    selectCategory(categoryId) {
      this.formData.category = categoryId;
    },
    submit() {
      // 表单验证
      if (!this.formData.name) {
        this.showToast("请输入账号名称");
        return;
      }
      if (!this.formData.username) {
        this.showToast("请输入用户名");
        return;
      }
      if (!this.formData.password) {
        this.showToast("请输入密码");
        return;
      }

      this.loading = true;

      // 提交表单
      setTimeout(() => {
        this.loading = false;
        this.$emit("submit", { ...this.formData });
        this.visible = false;
      }, 300);
    },
    cancel() {
      this.visible = false;
    },
    showToast(title) {
      uni.showToast({
        title,
        icon: "none",
      });
    },
  },
};
</script>

<script setup>
// Vue 3 setup script
</script>

<style lang="scss" scoped>
.account-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;

  .form-title {
    font-size: 18px;
    font-weight: 500;
  }

  .header-actions {
    display: flex;
    justify-content: space-between;
    width: 60px;

    .save-icon {
      margin-right: 20px;
    }

    .wd-icon {
      padding: 5px;
    }
  }
}

.form-content {
  flex: 1;
  padding: 15px 15px 30px;
  overflow-y: auto;
}

.form-item {
  margin-bottom: 15px;

  .form-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
  }
}

.category-scroll {
  width: 100%;
  white-space: nowrap;
}

.category-list {
  display: inline-flex;
  padding: 5px 0;
}

.category-item {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  margin-right: 10px;
  background-color: #f5f5f5;
  border-radius: 20px;
  transition: all 0.3s;

  &.active {
    background-color: #ff8c00;
    color: #fff;
  }

  .category-icon,
  .wd-icon {
    margin-right: 6px;
  }

  .category-name {
    font-size: 14px;
  }
}

/* 移除底部区域样式 */

/* 自定义备注输入框样式 */
:deep(.wd-textarea) {
  min-height: auto;
}
</style>
